<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>BI Component - Multiple Selection</title>
    <link rel="Stylesheet" type="text/css" href="../../css/common/bi_app_style.css"/>
<link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/theme_style.css"/>

    <script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
    <script type="text/JavaScript" src="../../api/js/jquery-ui-1.9.2.custom.js"></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>
    <script>
        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            number:50,
            variable: undefined,
            varname: undefined, //this overrides variable if set
            value: undefined,
            notify: false
        };
        window.onload = function() {
        }
        var selectedItems = new Array();
        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            //example to set property values to dom elements
            refreshProperties();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var vname;
        var cycle = 1;
        var total,number;
        var updating = false;
        var refreshProperties = function refreshProperties(){ //REQUIRED function to be called by parent when a property change occurs
            vname = properties.varname ? properties.varname : properties.variable ? properties.variable.name : undefined;
            if(vname)
            {
                load(cycle);
            }
        };

        function load(cycle)
        {
            BOI.loadF4Values(vname, cycle, properties.number, function (data) {
                updating = false;
                clear_data();
                clear_selection();
                var values  = data.values;
                total = data.total;
                number = properties.number;
                pagination();
                $('.multiple').attr('id',data.varname);
                $('.multiple h3').html(properties.variable.description);
                $('#'+data.varname).data('page', cycle);
                $('#'+data.varname).data('totalPages', Math.ceil(data.total / number));
                $('.pagination p .current').html(cycle);
                $('.pagination p .total').html(Math.ceil(data.total / number));
                for (var x in data.values) {
                    $('.multiple .variable-inner ul').append('<li><p title="'+ data.values[x].name +'">' + data.values[x].value + '</p></li>');
                }
            }, parent.properties.rep_id); //added by ALHASASA for correct F4 mode
            multiple();
        }
        function clear_data() {
            $('.variable .variable-inner ul').html("");
        }
        function clear_selection(){
            selectedItems = [];
        }
        function resetSelections(){
            $('.multiple .variable-inner ul li.ui-selected p').each(function (){
                $(this).closest('li').removeClass('ui-selected');
            });
            properties.value ="";
            properties.variable.value="";
            BOI.context.variables[this.vname].value="";
            selectedItems = new Array();
        }
        function multiple()
        {
          $('.multiple .variable-inner ul').selectable({
              start: function (event, ui) {
              },
              stop: function (event, ui) {
                clear_selection();
                $('.ui-selected p').each(function ()
                {
                    if ($.inArray($(this).text(), selectedItems ) == -1) {
                        selectedItems.push($(this)[0].title);
                    }
                });
                properties.value = selectedItems;
              }
          });
        }
        function pagination()
        {
            if(properties.nunmber > total)
            {
                $(".pagination").css('display','none');
            }
            else
            {
                $(".pagination").css('display','block');
            }
        }

        $(document).ready(function () {
            //2/5/2014 Added by jaroudnh, sadeq for variable dependancy...
            BOI.Events.addListener(BOI.Events.varrefresh, function(args){
                load(1);
            });
            $(".pagination a").live('click', function () {
                var varName = $(this).closest('.variable');

                var temp = 0;
                if (updating == false) {
                    if ($(this).hasClass("right") && varName.data('page') < varName.data('totalPages')) {
                        temp = varName.data('page') + 1;
                        varName.data('page', temp);
                    }
                    else if ($(this).hasClass("left") && varName.data('page') > 1) {
                        temp = varName.data('page') - 1;
                        varName.data('page', temp);
                    }
                    if (temp != 0) {
                        $('.pagination p .current').html(varName.data('page'));
                        load(varName.data('page'));
                    }
                }
            });
            // Height setting for Variable Inner DIV
            var frameHt = $('body').height();
            var varHd = $('.variable-head').height();
            $('.variable-inner').height((frameHt - varHd) - 18);
        });
    </script>
</head>
<style>
    body { overflow: hidden;}
</style>
<body>
<div class="variable-cover">
    <div class="variable multiple" id="">
        <div class="variable-head">
            <h3><!--Roles Owned By--></h3>
        </div>
        <div class="variable-inner">
            <ul>
                <!--<li><p>Dummy Value</p></li>-->
            </ul>
        </div>
        <div class="pagination">
            <ul>
                <li><a class="left"><</a></li>
                <li><p><span class="current">1</span>&nbsp;/&nbsp;<span class="total">10</span></p></li>
                <li><a class="right">></a></li>
            </ul>
            <div class="clear"></div>
        </div>
    </div>
</div>
</body>
</html>
<%
theme = ''.
%>